vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)

2023-08-17 16:52| 来源: 网络整理| 查看: 265

只能慢速拖动的代码：

vue结合原生js实现拖动 {{ site.name }} {{ index }} : {{ site.name }} new Vue({ el: '#app', data: { list1: [{name:'拖动我', index:0}], list2: [{name:'a', index:0}, {name:'b', index:1}, {name:'c', index: 2}, {name:'d', index: 3}], vm:'', sb_bkx: 0, sb_bky: 0, is_moving: false }, methods: { mousedown: function (site, event) { var startx=event.x; var starty=event.y; this.sb_bkx=startx - event.target.offsetLeft; this.sb_bky=starty - event.target.offsetTop; this.is_moving = true; }, mousemove: function (site, event) { var endx=event.x - this.sb_bkx; var endy=event.y - this.sb_bky; var _this = this if(this.is_moving){ event.target.style.left=endx+'px'; event.target.style.top=endy+'px'; } }, mouseup: function (e) { this.is_moving = false; } } }) .ctn{ line-height: 50px; cursor: pointer; font-size: 20px; text-align: center; float: left; } .sub:hover{ background: #e6dcdc; color: white; width: 100px; } .ctn1{ border: 1px solid green; width: 100px; } .ctn2{ border: 1px solid black; width: 100px; margin-left: 50px; } .fixed{ width: 100px; height: 100px; position: fixed; background: red; left: 10px; top: 10px; cursor: move; }

可以快速拖动的代码：

vue结合原生js实现拖动 {{ site.name }} {{ index }} : {{ site.name }} new Vue({ el: '#app', data: { list1: [{name:'拖动我', index:0}], list2: [{name:'a', index:0}, {name:'b', index:1}, {name:'c', index: 2}, {name:'d', index: 3}], vm:'', sb_bkx: 0, sb_bky: 0, }, methods: { mousedown: function (site, event) { var event=event||window.event; var _target = event.target var startx=event.clientX; var starty=event.clientY; var sb_bkx=startx-event.target.offsetLeft; var sb_bky=starty-event.target.offsetTop; var ww=document.documentElement.clientWidth; var wh = window.innerHeight; if (event.preventDefault) { event.preventDefault(); } else{ event.returnValue=false; }; document.onmousemove=function (ev) { var event=ev||window.event; var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; if (event.clientY ww) { return false; }; var endx=event.clientX-sb_bkx; var endy=event.clientY-sb_bky; _target.style.left=endx+'px'; _target.style.top=endy+'px'; } }, mouseup: function (e) { document.onmousemove=null; } } }) .ctn{ line-height: 50px; cursor: pointer; font-size: 20px; text-align: center; float: left; } .sub:hover{ background: #e6dcdc; color: white; width: 100px; } .ctn1{ border: 1px solid green; width: 100px; } .ctn2{ border: 1px solid black; width: 100px; margin-left: 50px; } .fixed{ width: 100px; height: 100px; position: fixed; background: red; left: 10px; top: 15px; cursor: move; }

补充:vue 自定义指令-拖拽主要思想：获取拖拽的dom元素，在oDiv.onmousedown事件内获取鼠标相对dom元素本身的位置：

var disX=ev.clientX-oDiv.offsetLeft; var disY=ev.clientY-oDiv.offsetTop;

再通过document.onmousemove事件计算dom元素左上角相对视口的距离：

var l=ev.clientX-disX; var t=ev.clientY-disY; oDiv.style.left=l+'px'; oDiv.style.top=t+'px';

完整代码：

/* vue-自定义指令-拖拽 */ Vue.directive('drag',function(){ var oDiv=this.el; oDiv.onmousedown=function(ev){ var disX=ev.clientX-oDiv.offsetLeft; var disY=ev.clientY-oDiv.offsetTop; document.onmousemove=function(ev){ var l=ev.clientX-disX; var t=ev.clientY-disY; oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; }; }; }); window.onload=function(){ var vm=new Vue({ el:'#box', data:{ msg:'welcome' } }); };

【本文地址】

公司简介

联系我们